
<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>切换器 - UIkit 中文文档</title>
        <meta name="description" content="利用UIkit切换器组件(Switcher)可以通过不同的内容窗格进行动态变换。切换器由数个触发单元和与他们相关联的内容项组成，通常切换器和其他组件搭配使用，这里将展示其中一部分。">
        <meta name="author" content="UIkit中文网">
         
<meta name="keywords" content="UIKit切换器组件,动态变换,触发单元,导航切换,选项卡切换,按钮切换,Switcher">
        <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
        <link rel="apple-touch-icon-precomposed" href="images/apple-touch-icon.png">
        <link id="data-uikit-theme" rel="stylesheet" href="css/uikit.docs.min.css">
        <link rel="stylesheet" href="css/docs.css">
        <link rel="stylesheet" href="../vendor/highlight/highlight.css">
        <script src="../vendor/jquery.js"></script>
        <script src="js/uikit.min.js"></script>
        <script src="../vendor/highlight/highlight.js"></script>
        <script src="js/docs.js"></script>
    </head>

    <body class="tm-background">

        <nav class="tm-navbar uk-navbar uk-navbar-attached">
            <div class="uk-container uk-container-center">

                <a class="uk-navbar-brand uk-hidden-small" href="../index.html"><img class="uk-margin uk-margin-remove" src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></a>

                <ul class="uk-navbar-nav uk-hidden-small">
                    <li><a href="documentation_get-started.html">开始使用</a></li>
                    <li class="uk-active"><a href="core.html">核心组件</a></li>
                    <li><a href="components.html">附加组件</a></li>
                    <li><a href="customizer.html">定制工具</a></li>
                    <li><a href="../showcase/index.html">案例展示</a></li>
                    <li><a href="tutorials.html">视频教程</a></li>
                </ul>

                <a href="#tm-offcanvas" class="uk-navbar-toggle uk-visible-small" data-uk-offcanvas></a>

                <div class="uk-navbar-brand uk-navbar-center uk-visible-small"><img src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></div>

            </div>
        </nav>

        <div class="tm-middle">
            <div class="uk-container uk-container-center">

                <div class="uk-grid" data-uk-grid-margin>
                    <div class="tm-sidebar uk-width-medium-1-4 uk-hidden-small">

                        <ul class="tm-nav uk-nav" data-uk-nav>

                            <li class="uk-nav-header">默认</li>
                            <li><a href="base.html">基础</a></li>
                            <li><a href="print.html">打印</a></li>

                            <li class="uk-nav-header">布局类组件</li>
                            <li><a href="grid.html">网格</a></li>
                            <li><a href="panel.html">面板</a></li>
                            <li><a href="block.html">块</a></li>
                            <li><a href="article.html">文章</a></li>
                            <li><a href="comment.html">评论</a></li>
                            <li><a href="utility.html">效果</a></li>
                            <li><a href="flex.html">Flex</a></li>
                            <li><a href="cover.html">覆盖</a></li>

                            <li class="uk-nav-header">导航类组件</li>
                            <li><a href="nav.html">导航菜单</a></li>
                            <li><a href="navbar.html">导航栏</a></li>
                            <li><a href="subnav.html">二级导航</a></li>
                            <li><a href="breadcrumb.html">面包屑</a></li>
                            <li><a href="pagination.html">分页</a></li>
                            <li><a href="tab.html">选项卡</a></li>
                            <li><a href="thumbnav.html">缩略图导航</a></li>

                            <li class="uk-nav-header">页面元素</li>
                            <li><a href="list.html">列表</a></li>
                            <li><a href="description-list.html">描述列表</a></li>
                            <li><a href="table.html">表格</a></li>
                            <li><a href="form.html">表单</a></li>

                            <li class="uk-nav-header">常用组件</li>
                            <li><a href="button.html">按钮</a></li>
                            <li><a href="icon.html">图标</a></li>
                            <li><a href="close.html">关闭</a></li>
                            <li><a href="badge.html">徽章</a></li>
                            <li><a href="alert.html">提示框</a></li>
                            <li><a href="thumbnail.html">缩略图</a></li>
                            <li><a href="overlay.html">遮罩</a></li>
                            <li><a href="text.html">文本</a></li>
                            <li><a href="column.html">列</a></li>
                            <li><a href="animation.html">动画</a></li>
                            <li><a href="contrast.html">对比度</a></li>

                            <li class="uk-nav-header">JavaScript组件</li>
                            <li><a href="dropdown.html">下拉菜单</a></li>
                            <li><a href="modal.html">模态对话框</a></li>
                            <li><a href="offcanvas.html">抽屉</a></li>
                            <li class="uk-active"><a href="switcher.html">切换器</a></li>
                            <li><a href="toggle.html">拨动器</a></li>
                            <li><a href="scrollspy.html">滚动监听</a></li>
                            <li><a href="smooth-scroll.html">平滑滚动</a></li>

                        </ul>

                    </div>
                    <div class="tm-main uk-width-medium-3-4">

                        <article class="uk-article">

                            <h1 class="uk-article-title">切换器/Switcher</h1>

                            <p class="uk-article-lead">通过不同的内容窗格进行动态变换。</p>

                            <h2 id="usage"><a href="#usage" class="uk-link-reset">用法</a></h2>

                            <p>切换器组件由若干拨动器和与它们相关联的内容项目组成。添加 <code>data-uk-switcher="{connect:'#ID'}"</code> 到包含拨动器的元素，将此属性内的ID指向具有相同ID的包含内容项目的元素。添加 <code>.uk-switcher</code> 类到同一个元素中。通常，切换器和其他组件搭配使用，这里将展示其中一部分。</p>

                            <h3 class="tm-article-subtitle">示例</h3>

                            <ul class="uk-subnav uk-subnav-pill" data-uk-switcher="{connect:'#subnav-pill-content-1'}">
                                <li class="uk-active"><a href="#">Item</a></li>
                                <li><a href="#">Item</a></li>
                                <li><a href="#">Item</a></li>
                            </ul>

                            <ul id="subnav-pill-content-1" class="uk-switcher">
                                <li class="uk-active">Hello!</li>
                                <li>Hello again!</li>
                                <li>Bazinga!</li>
                            </ul>

                            <h3 class="tm-article-subtitle">Code</h3>

<pre><code>&lt;!-- 这是包含拨动元素的容器 --&gt;
&lt;ul data-uk-switcher="{connect:'#my-id'}"&gt;
    &lt;li&gt;&lt;a href=""&gt;...&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;!-- 这是内容项目的容器 --&gt;
&lt;ul id="my-id" class="uk-switcher"&gt;
    &lt;li&gt;...&lt;/li&gt;
&lt;/ul&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h3 id="switcher-content-switch"><a href="#switcher-content-switch" class="uk-link-reset">在内容中切换条目/Switch items from within content</a></h3>

                            <p>在某些情况下，你想要从显示的内容中操作切换到另一个内容节点。添加 <code>data-uk-switcher-item</code> 属性使之成为可能。为了指向目标条目，你必须将 data 属性设置为相应的标号。</p>

                            <h4 class="tm-article-subtitle">Example</h4>

                            <div class="uk-grid" data-uk-grid-margin>
                                <div class="uk-width-medium-1-4">

                                    <ul class="uk-subnav uk-subnav-pill" data-uk-switcher="{connect:'#switch-from-content'}">
                                        <li class="uk-active"><a href="">Item</a></li>
                                        <li><a href="">Item</a></li>
                                        <li><a href="">Item</a></li>
                                    </ul>

                                </div>
                                <div class="uk-width-medium-3-4">

                                    <ul id="switch-from-content" class="uk-switcher">
                                        <li class="uk-active">Hello! <a href="#" data-uk-switcher-item="next">切换到下一内容节点</a></li>
                                        <li>Hello again! <a href="#" data-uk-switcher-item="2">切换到第三个内容节点3</a></li>
                                        <li>Bazinga! <a href="#" data-uk-switcher-item="previous">切换到前一内容节点</a></li>
                                    </ul>

                                </div>
                            </div>

                            <h4 class="tm-article-subtitle">Markup</h4>

<pre><code>&lt;!-- 这是包含拨动元素的导航 --&gt;
&lt;ul data-uk-switcher="{connect:'#my-id'}"&gt;
    &lt;li&gt;&lt;a href=""&gt;...&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;!-- 这是内容条目的容器 --&gt;
&lt;ul id="my-id" class="uk-switcher"&gt;
    &lt;li&gt; ... &lt;a href="" data-uk-switcher-item="0"&gt;...&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt; ... &lt;a href="" data-uk-switcher-item="1"&gt;...&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</code></pre>

                            <p>将 data 属性设置为 <code>next</code> 和 <code>previous</code> 将会切换到相邻的条目</p>

<h4 class="tm-article-subtitle">Markup</h4>

<pre><code>&lt;li&gt; ... &lt;a href="" data-uk-switcher-item="next"&gt;...&lt;/a&gt;&lt;/li&gt;
&lt;li&gt; ... &lt;a href="" data-uk-switcher-item="previous"&gt;...&lt;/a&gt;&lt;/li&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h3 id="switcher-multiple"><a href="#switcher-multiple" class="uk-link-reset">关联多个项目</a></h3>

                            <p>切换器也可以管理多个内容容器。只需要在 <code>connect</code> 参数中填入需要关联的容器的ID，用逗号隔开。</p>

                            <h4 class="tm-article-subtitle">示例</h4>

                            <div class="uk-grid" data-uk-grid-margin>
                                <div class="uk-width-medium-1-4">

                                    <ul class="uk-nav uk-nav-side" data-uk-switcher="{connect:'#switch-multiple-1, #switch-multiple-2'}">
                                        <li class="uk-active"><a href="#">Item</a></li>
                                        <li><a href="#">Item</a></li>
                                        <li><a href="#">Item</a></li>
                                    </ul>

                                </div>
                                <div class="uk-width-medium-3-4">
                                    <div class="uk-grid uk-grid-width-medium-1-2" data-uk-margin>

                                        <div>
                                            <h4>Container 1</h4>
                                            <ul id="switch-multiple-1" class="uk-switcher">
                                                <li class="uk-active">Hello from container 1!</li>
                                                <li>Hello again from container 1!</li>
                                                <li>Bazinga from container 1!</li>
                                            </ul>
                                        </div>

                                        <div>
                                            <h4>Container 2</h4>
                                            <ul id="switch-multiple-2" class="uk-switcher">
                                                <li class="uk-active">Hello from container 2!</li>
                                                <li>Hello again from container 2!</li>
                                                <li>Bazinga from container 2!</li>
                                            </ul>
                                        </div>
                                    </div>

                                </div>
                            </div>

                            <h4 class="tm-article-subtitle">Code</h4>

<pre><code>&lt;!-- 这是包含拨动元素的导航菜单 --&gt;
&lt;ul data-uk-switcher="{connect:'#my-id-one, #my-id-two'}"&gt;
    &lt;li&gt;&lt;a href=""&gt;...&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;!-- 这些是包含着内容项目的容器们 --&gt;
&lt;ul id="my-id-one" class="uk-switcher"&gt;
    &lt;li&gt;...&lt;/li&gt;
&lt;/ul&gt;

&lt;ul id="my-id-two" class="uk-switcher"&gt;
    &lt;li&gt;...&lt;/li&gt;
&lt;/ul&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="switcher-animations"><a href="#switcher-animations" class="uk-link-reset">动画</a></h2>

                            <p>切换器组件允许你为它添加各式的切换动画。你所需要做的就是添加 <code>animation</code> 参数到data属性中，然后设置你希望使用的动画。查阅下面的列表，了解我们提供的动画吧。</p>

                            <div class="uk-overflow-container">
                                <table class="uk-table uk-text-nowrap">
                                    <thead>
                                        <tr>
                                            <th>Class</th>
                                            <th>描述</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>fade</code></td>
                                            <td>元素淡入</td>
                                        </tr>
                                        <tr>
                                            <td><code>scale</code></td>
                                            <td>元素由小变大</td>
                                        </tr>
                                        <tr>
                                            <td><code>slide-top</code></td>
                                            <td>元素从顶部滑入</td>
                                        </tr>
                                        <tr>
                                            <td><code>slide-bottom</code></td>
                                            <td>元素从底部滑入</td>
                                        </tr>
                                        <tr>
                                            <td><code>slide-left</code></td>
                                            <td>元素从左边滑入</td>
                                        </tr>
                                        <tr>
                                            <td><code>slide-right</code></td>
                                            <td>元素从右边滑入</td>
                                        </tr>
                                        <tr>
                                            <td><code>slide-horizontal</code></td>
                                            <td>内容项目水平方向滑动，方向基于元素相邻关系。</td>
                                        </tr>
                                        <tr>
                                            <td><code>slide-vertical</code></td>
                                            <td>内容项目垂直方向滑动，方向基于元素相邻关系。</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <h3 class="tm-article-subtitle">示例</h3>

                            <div class="uk-grid uk-grid-width-medium-1-4 uk-margin" data-uk-grid-margin>
                                <div>

                                    <h5 class="uk-h4">Fade</h5>

                                    <ul class="uk-subnav uk-subnav-pill" data-uk-switcher="{connect:'#switcher-content-a-fade', animation: 'fade'}">
                                        <li class="uk-active"><a href="#">Item</a></li>
                                        <li><a href="#">Item</a></li>
                                        <li><a href="#">Item</a></li>
                                    </ul>

                                    <ul id="switcher-content-a-fade" class="uk-switcher uk-margin">
                                        <li>Hello!</li>
                                        <li>Hello again!</li>
                                        <li>Bazinga!</li>
                                    </ul>

                                </div>
                                <div>

                                    <h5 class="uk-h4">Scale</h5>

                                    <ul class="uk-subnav uk-subnav-pill" data-uk-switcher="{connect:'#switcher-content-a-scale', animation: 'scale'}">
                                        <li class="uk-active"><a href="#">Item</a></li>
                                        <li><a href="#">Item</a></li>
                                        <li><a href="#">Item</a></li>
                                    </ul>

                                    <ul id="switcher-content-a-scale" class="uk-switcher uk-margin">
                                        <li>Hello!</li>
                                        <li>Hello again!</li>
                                        <li>Bazinga!</li>
                                    </ul>

                                </div>
                                <div>

                                    <h5 class="uk-h4">Slide top</h5>

                                    <ul class="uk-subnav uk-subnav-pill" data-uk-switcher="{connect:'#switcher-content-a-slide-top', animation: 'slide-top'}">
                                        <li class="uk-active"><a href="#">Item</a></li>
                                        <li><a href="#">Item</a></li>
                                        <li><a href="#">Item</a></li>
                                    </ul>

                                    <ul id="switcher-content-a-slide-top" class="uk-switcher uk-margin">
                                        <li>Hello!</li>
                                        <li>Hello again!</li>
                                        <li>Bazinga!</li>
                                    </ul>

                                </div>
                                <div>

                                    <h5 class="uk-h4">Slide bottom</h5>

                                    <ul class="uk-subnav uk-subnav-pill" data-uk-switcher="{connect:'#switcher-content-a-slide-bottom', animation: 'slide-bottom'}">
                                        <li class="uk-active"><a href="#">Item</a></li>
                                        <li><a href="#">Item</a></li>
                                        <li><a href="#">Item</a></li>
                                    </ul>

                                    <ul id="switcher-content-a-slide-bottom" class="uk-switcher uk-margin">
                                        <li>Hello!</li>
                                        <li>Hello again!</li>
                                        <li>Bazinga!</li>
                                    </ul>

                                </div>
                                <div>

                                    <h5 class="uk-h4">Slide left</h5>

                                    <ul class="uk-subnav uk-subnav-pill" data-uk-switcher="{connect:'#switcher-content-a-slide-left', animation: 'slide-left'}">
                                        <li class="uk-active"><a href="#">Item</a></li>
                                        <li><a href="#">Item</a></li>
                                        <li><a href="#">Item</a></li>
                                    </ul>

                                    <ul id="switcher-content-a-slide-left" class="uk-switcher uk-margin">
                                        <li>Hello!</li>
                                        <li>Hello again!</li>
                                        <li>Bazinga!</li>
                                    </ul>

                                </div>
                                <div>

                                    <h5 class="uk-h4">Slide right</h5>

                                    <ul class="uk-subnav uk-subnav-pill" data-uk-switcher="{connect:'#switcher-content-a-slide-right', animation: 'slide-right'}">
                                        <li class="uk-active"><a href="#">Item</a></li>
                                        <li><a href="#">Item</a></li>
                                        <li><a href="#">Item</a></li>
                                    </ul>

                                    <ul id="switcher-content-a-slide-right" class="uk-switcher uk-margin">
                                        <li>Hello!</li>
                                        <li>Hello again!</li>
                                        <li>Bazinga!</li>
                                    </ul>

                                </div>
                                <div>

                                    <h5 class="uk-h4">Slide horizontal</h5>

                                    <ul class="uk-subnav uk-subnav-pill" data-uk-switcher="{connect:'#switcher-content-a-slide-horizontal', animation: 'slide-horizontal'}">
                                        <li class="uk-active"><a href="#">Item</a></li>
                                        <li><a href="#">Item</a></li>
                                        <li><a href="#">Item</a></li>
                                    </ul>

                                    <ul id="switcher-content-a-slide-horizontal" class="uk-switcher uk-margin">
                                        <li>Hello!</li>
                                        <li>Hello again!</li>
                                        <li>Bazinga!</li>
                                    </ul>

                                </div>
                                <div>

                                    <h5 class="uk-h4">Slide vertical</h5>

                                    <ul class="uk-subnav uk-subnav-pill" data-uk-switcher="{connect:'#switcher-content-a-slide-vertical', animation: 'slide-vertical'}">
                                        <li class="uk-active"><a href="#">Item</a></li>
                                        <li><a href="#">Item</a></li>
                                        <li><a href="#">Item</a></li>
                                    </ul>

                                    <ul id="switcher-content-a-slide-vertical" class="uk-switcher uk-margin">
                                        <li>Hello!</li>
                                        <li>Hello again!</li>
                                        <li>Bazinga!</li>
                                    </ul>

                                </div>
                            </div>

                            <h3 class="tm-article-subtitle">Code</h3>

<pre><code>&lt;!-- 包含拨动元素的容器 --&gt;
&lt;ul data-uk-switcher="{connect:'#my-id', animation: 'fade'}"&gt;
    &lt;li&gt;&lt;a href=""&gt;...&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;!-- 包含内容项目的容器 --&gt;
&lt;ul id="my-id" class="uk-switcher"&gt;
    &lt;li&gt;...&lt;/li&gt;
&lt;/ul&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h3 id="switcher-custom-animations"><a href="#switcher-custom-animations" class="uk-link-reset">自定义动画</a></h3>

                            <p>你同样可以使用 <a href="animation.html">动画组件</a> 中的 <code>uk-animation-*</code> 类来应用多个动画。通过这种方式你甚至可以创建你的自定义类来为切换器应用不同的动画效果。</p>

                            <h4 class="tm-article-subtitle">示例</h4>

                            <ul class="uk-subnav uk-subnav-pill" data-uk-switcher="{connect:'#tab-content-a-anim-custom', animation: 'uk-animation-fade, uk-animation-slide-left'}">
                                <li class="uk-active"><a href="#">Tab</a></li>
                                <li><a href="#">Tab</a></li>
                                <li><a href="#">Tab</a></li>
                            </ul>

                            <ul id="tab-content-a-anim-custom" class="uk-switcher uk-margin">
                                <li>Hello!</li>
                                <li>Hello again!</li>
                                <li>Bazinga!</li>
                            </ul>

                            <h4 class="tm-article-subtitle">Code</h4>

<pre><code>&lt;!-- 包含拨动元素的容器  --&gt;
&lt;ul data-uk-switcher="{connect:'#my-id', animation: 'uk-animation-fade, uk-animation-slide-left'}"&gt;
    &lt;li&gt;&lt;a href=""&gt;...&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;!-- 包含内容项目的容器 --&gt;
&lt;ul id="my-id" class="uk-switcher"&gt;
    &lt;li&gt;...&lt;/li&gt;
&lt;/ul&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="switcher-with-subnav"><a href="#switcher-with-subnav" class="uk-link-reset">切换器与二级导航</a></h2>

                            <p>轻松地将切换器应用于 <a href="subnav.html">二级导航组件</a> 中.</p>

                            <h3 class="tm-article-subtitle">示例</h3>

                            <ul class="uk-subnav uk-subnav-pill" data-uk-switcher="{connect:'#subnav-pill-content-2'}">
                                <li class="uk-active"><a href="#">Item</a></li>
                                <li><a href="#">Item</a></li>
                                <li><a href="#">Item</a></li>
                            </ul>

                            <ul id="subnav-pill-content-2" class="uk-switcher">
                                <li class="uk-active">Hello!</li>
                                <li>Hello again!</li>
                                <li>Bazinga!</li>
                            </ul>

                            <h3 class="tm-article-subtitle">Code</h3>

<pre><code>&lt;!-- 这是包含拨动元素的二级导航 --&gt;
&lt;ul class="uk-subnav uk-subnav-pill" data-uk-switcher="{connect:'#my-id'}"&gt;
    &lt;li&gt;&lt;a href=""&gt;...&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;!-- 包含内容项目的容器 --&gt;
&lt;ul id="my-id" class="uk-switcher"&gt;
    &lt;li&gt;...&lt;/li&gt;
&lt;/ul&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="switcher-with-tabs"><a href="#switcher-with-tabs" class="uk-link-reset">切换器与选项卡</a></h2>

                            <p>作为一个特例，添加 <code>data-uk-tab="{connect:'#ID'}"</code> 属性，使用“tab”参数替代“switcher”，使得切换器和 <a href="tab.html" title="Tab component">选项卡组件</a> 相互结合。</p>

                            <h3 class="tm-article-subtitle">示例</h3>

                            <div class="uk-margin uk-grid" data-uk-grid-margin>
                                <div class="uk-width-medium-1-2">

                                    <ul class="uk-tab" data-uk-tab="{connect:'#tab-content'}">
                                        <li class="uk-active"><a href="#">Tab</a></li>
                                        <li><a href="#">Tab</a></li>
                                        <li><a href="#">Tab</a></li>
                                    </ul>

                                    <ul id="tab-content" class="uk-switcher uk-margin">
                                        <li class="uk-active">Hello!</li>
                                        <li>Hello again!</li>
                                        <li>Bazinga!</li>
                                    </ul>

                                </div>
                                <div class="uk-width-medium-1-2">

                                    <ul id="tab-bottom-content" class="uk-switcher uk-margin">
                                        <li class="uk-active">Hello!</li>
                                        <li>Hello again!</li>
                                        <li>Bazinga!</li>
                                    </ul>

                                    <ul class="uk-tab uk-tab-bottom" data-uk-tab="{connect:'#tab-bottom-content'}">
                                        <li class="uk-active"><a href="#">Tab</a></li>
                                        <li><a href="#">Tab</a></li>
                                        <li><a href="#">Tab</a></li>
                                    </ul>

                                </div>
                            </div>

                            <h3 class="tm-article-subtitle">Code</h3>

<pre><code>&lt;!-- 这是包含拨动元素的选项卡式导航 --&gt;
&lt;ul class="uk-tab" data-uk-tab="{connect:'#my-id'}"&gt;
    &lt;li&gt;&lt;a href=""&gt;...&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;!-- 包含内容项目的容器 --&gt;
&lt;ul id="my-id" class="uk-switcher uk-margin"&gt;
    &lt;li&gt;...&lt;/li&gt;
&lt;/ul&gt;</code></pre>

                            <p><span class="uk-badge">注意</span>  当使用选项卡组件的 <code>.uk-tab-bottom</code> 类的时候，导航和内容需要按相反的顺序放置，这样内容才会显示在选项卡的上方。</p>

                            <hr class="uk-article-divider">

                            <h3>垂直选项卡</h3>

                            <p>使用 <a href="grid.html" title="Grid component">网格组件</a>正确地显示带有垂直排列的选项卡导航的内容。</p>

                            <h4 class="tm-article-subtitle">示例</h4>

                            <div class="uk-grid" data-uk-grid-margin>
                                <div class="uk-width-medium-1-2">

                                    <div class="uk-grid">
                                        <div class="uk-width-medium-1-2">

                                            <ul class="uk-tab uk-tab-left" data-uk-tab="{connect:'#tab-left-content'}">
                                                <li class="uk-active"><a href="#">Tab</a></li>
                                                <li><a href="#">Tab</a></li>
                                                <li><a href="#">Tab</a></li>
                                            </ul>

                                        </div>
                                        <div class="uk-width-medium-1-2">

                                            <ul id="tab-left-content" class="uk-switcher">
                                                <li class="uk-active">Hello!</li>
                                                <li>Hello again!</li>
                                                <li>Bazinga!</li>
                                            </ul>

                                        </div>
                                    </div>

                                </div>
                                <div class="uk-width-medium-1-2">

                                    <div class="uk-grid" data-uk-grid-margin>
                                        <div class="uk-width-medium-1-2 uk-push-1-2">

                                            <ul class="uk-tab uk-tab-right" data-uk-tab="{connect:'#tab-right-content'}">
                                                <li class="uk-active"><a href="#">Tab</a></li>
                                                <li><a href="#">Tab</a></li>
                                                <li><a href="#">Tab</a></li>
                                            </ul>

                                        </div>
                                        <div class="uk-width-medium-1-2 uk-pull-1-2">

                                            <ul id="tab-right-content" class="uk-switcher">
                                                <li class="uk-active">Hello!</li>
                                                <li>Hello again!</li>
                                                <li>Bazinga!</li>
                                            </ul>

                                        </div>
                                    </div>

                                </div>
                            </div>

                            <h4 class="tm-article-subtitle">Code</h4>

<pre><code>&lt;!-- 位于左边的选项卡式导航 --&gt;
&lt;div class="uk-grid"&gt;
    &lt;div class="uk-width-medium-1-2"&gt;
        &lt;!-- 包含拨动元素的垂直选项卡式导航 --&gt;
        &lt;ul class="uk-tab uk-tab-left" data-uk-tab="{connect:'#my-id'}"&gt;...&lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class="uk-width-medium-1-2"&gt;
        &lt;!-- 包含内容项目的容器 --&gt;
        &lt;ul id="my-id" class="uk-switcher"&gt;...&lt;/ul&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;!-- 位于右边的选项卡式导航 --&gt;
&lt;div class="uk-grid"&gt;
    &lt;div class="uk-width-medium-1-2 uk-push-1-2"&gt;
        &lt;!-- 包含拨动元素的垂直选项卡式导航 --&gt;
        &lt;ul class="uk-tab uk-tab-right" data-uk-tab="{connect:'#my-id'}"&gt;...&lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class="uk-width-medium-1-2 uk-pull-1-2"&gt;
        &lt;!-- 包含内容项目的容器 --&gt;
        &lt;ul id="my-id" class="uk-switcher"&gt;...&lt;/ul&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="switcher-with-buttons"><a href="#switcher-with-buttons" class="uk-link-reset">切换器与按钮</a></h2>

                            <p>切换器同样可以应用于 <a href="button.html" title="Button component">按钮或按钮组</a> 中。只需要添加切换器data属性到包含了一组按钮的 <code>&lt;div&gt;</code> 元素中或者添加到带有 <code>.button-group</code> 类的元素。</p>

                            <h3 class="tm-article-subtitle">示例</h3>

                            <div class="uk-margin uk-grid" data-uk-grid-margin>
                                <div class="uk-width-medium-1-2">

                                    <div data-uk-switcher="{connect:'#button-content'}">
                                        <a class="uk-button" href="#">Link</a>
                                        <button class="uk-button">Button</button>
                                        <button class="uk-button" type="button">Button</button>
                                    </div>

                                    <ul id="button-content" class="uk-switcher uk-margin">
                                        <li class="uk-active">Hello!</li>
                                        <li>Hello again!</li>
                                        <li>Bazinga!</li>
                                    </ul>

                                </div>
                                <div class="uk-width-medium-1-2">

                                    <div class="uk-button-group" data-uk-switcher="{connect:'#button-group-content'}">
                                        <a class="uk-button" href="#">Link</a>
                                        <button class="uk-button" type="button">Button</button>
                                        <button class="uk-button" type="button">Button</button>
                                    </div>

                                    <ul id="button-group-content" class="uk-switcher uk-margin">
                                        <li class="uk-active">Hello!</li>
                                        <li>Hello again!</li>
                                        <li>Bazinga!</li>
                                    </ul>

                                </div>
                            </div>

                            <h3 class="tm-article-subtitle">Code</h3>

<pre><code>&lt;!-- 包含拨动按钮的容器 --&gt;
&lt;div data-uk-switcher="{connect:'#my-id'}"&gt;
    &lt;button class="uk-button" type="button"&gt;...&lt;/button&gt;
&lt;/div&gt;

&lt;!-- 包含内容项目的容器 --&gt;
&lt;ul id="my-id" class="uk-switcher uk-margin"&gt;...&lt;/ul&gt;

&lt;!-- 包含拨动按钮的按钮租 --&gt;
&lt;div class="uk-button-group" data-uk-switcher="{connect:'#my-id'}"&gt;
    &lt;button class="uk-button" type="button"&gt;...&lt;/button&gt;
&lt;/div&gt;

&lt;!-- 包含内容项目的容器 --&gt;
&lt;ul id="my-id" class="uk-switcher uk-margin"&gt;...&lt;/ul&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="switcher-with-navs"><a href="#switcher-with-navs" class="uk-link-reset">切换器与导航菜单</a></h2>

                            <p>若需将切换器应用于 <a href="nav.html" title="Nav component">导航菜单组件</a>，添加data属性到导航菜单的 <code>&lt;ul&gt;</code> 元素中。使用 <a href="grid.html" title="Grid component">网格组件</a> 将导航菜单和内容项放置在同一个网格布局中。</p>

                            <h3 class="tm-article-subtitle">示例</h3>

                            <div class="uk-grid" data-uk-grid-margin>
                                <div class="uk-width-medium-1-4">

                                    <ul class="uk-nav uk-nav-side" data-uk-switcher="{connect:'#nav-content'}">
                                        <li class="uk-active"><a href="">Item</a></li>
                                        <li><a href="">Item</a></li>
                                        <li><a href="">Item</a></li>
                                    </ul>

                                </div>
                                <div class="uk-width-medium-3-4">

                                    <ul id="nav-content" class="uk-switcher">
                                        <li class="uk-active">Hello!</li>
                                        <li>Hello again!</li>
                                        <li>Bazinga!</li>
                                    </ul>

                                </div>
                            </div>

                            <h3 class="tm-article-subtitle">Code</h3>

<pre><code>&lt;div class="uk-grid"&gt;
    &lt;div class="uk-width-medium-1-4"&gt;

        &lt;!-- 包含拨动元素的导航菜单 --&gt;
        &lt;ul class="uk-nav uk-nav-side" data-uk-switcher="{connect:'#my-id'}"&gt;
            &lt;li&gt;&lt;a href=""&gt;...&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class="uk-width-medium-3-4"&gt;

        &lt;!-- 包含内容项目的容器 --&gt;
        &lt;ul id="my-id" class="uk-switcher"&gt;
            &lt;li&gt;...&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="javascript-options"><a href="#javascript-options" class="uk-link-reset">JavaScript 选项</a></h2>

                            <p>这是一个关于如何通过属性设置选项的例子：</p>

                            <pre><code>data-uk-switcher=&quot;{active:1}&quot;</code></pre>

                            <div class="uk-overflow-container">
                                <table class="uk-table uk-table-striped">
                                    <thead>
                                        <tr>
                                            <th>选项</th>
                                            <th>可能的值</th>
                                            <th>默认值</th>
                                            <th>描述</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>connect</code></td>
                                            <td>CSS selector</td>
                                            <td>false</td>
                                            <td>被关联的条目容器</td>
                                        </tr>
                                        <tr>
                                            <td><code>toggle</code></td>
                                            <td>CSS selector</td>
                                            <td>'&gt; *'</td>
                                            <td>拨动CSS选择器，通过点击触发内容的切换行为。</td>
                                        </tr>
                                        <tr>
                                            <td><code>active</code></td>
                                            <td>integer</td>
                                            <td>0</td>
                                            <td>初始化时，呈激活状态的内容项目索引值</td>
                                        </tr>
                                        <tr>
                                            <td><code>animation</code></td>
                                            <td>mixed</td>
                                            <td>false</td>
                                            <td>预定义的动画名称或 uikit动画的类名。</td>
                                        </tr>
                                        <tr>
                                            <td><code>swiping</code></td>
                                            <td>boolean</td>
                                            <td>true</td>
                                            <td>启用或禁用通过滑动改变内容</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <h3>事件</h3>

                            <p>你可以为以下事件绑定回调函数，用于自定义功能：</p>

                            <div class="uk-overflow-container">
                                <table class="uk-table uk-table-striped uk-text-nowrap">
                                    <thead>
                                        <tr>
                                            <th>事件名称</th>
                                            <th>参数</th>
                                            <th>描述</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>show.uk.switcher</code></td>
                                            <td>event, active item</td>
                                            <td>切换器条目显示或改变时触发</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <h3 class="tm-article-subtitle">Example</h3>

<pre><code>$('[data-uk-switcher]').on('show.uk.switcher', function(event, area){
    console.log("Switcher switched to ", area);
});</code></pre>

                        </article>

                    </div>
                </div>

            </div>
        </div>

        <div class="tm-footer">
            <div class="uk-container uk-container-center uk-text-center">

                <ul class="uk-subnav uk-subnav-line uk-flex-center">
                    <li><a href="http://github.com/uikit/uikit">GitHub</a></li>
                    <li><a href="http://github.com/uikit/uikit/issues">Issues</a></li>
                    <li><a href="http://github.com/uikit/uikit/blob/master/CHANGELOG.md">Changelog</a></li>
                    <li><a href="https://twitter.com/getuikit">Twitter</a></li>
                </ul>

                <div class="uk-panel">
                    <p>Made by <a href="http://www.yootheme.com">YOOtheme</a> with love and caffeine.<br>Licensed under <a href="http://opensource.org/licenses/MIT">MIT license</a>.</p>
                    <a href="../index.html"><img src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></a>
                </div>

            </div>
        </div>

        <div id="tm-offcanvas" class="uk-offcanvas">

            <div class="uk-offcanvas-bar">

                <ul class="uk-nav uk-nav-offcanvas uk-nav-parent-icon" data-uk-nav="{multiple:true}">
                    <li class="uk-parent"><a href="#">UIkit 中文文档</a>
                        <ul class="uk-nav-sub">
                            <li><a href="documentation_get-started.html">开始使用</a></li>
                            <li><a href="documentation_how-to-customize.html">如何定制</a></li>
                            <li><a href="documentation_layouts.html">布局示例</a></li>
                            <li><a href="core.html">核心组件</a></li>
                            <li><a href="components.html">附加组件</a></li>
                            <li><a href="documentation_project-structure.html">项目结构</a></li>
                            <li><a href="documentation_less-sass.html">Less &amp; Sass 文件</a></li>
                            <li><a href="documentation_create-a-theme.html">创建主题</a></li>
                            <li><a href="documentation_create-a-style.html">创建样式</a></li>
                            <li><a href="documentation_customizer-json.html">Customizer.json</a></li>
                            <li><a href="documentation_javascript.html">JavaScript</a></li>
                            <li><a href="documentation_custom-prefix.html">自定义前缀</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-header">Core</li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-wrench"></i> 默认</a>
                        <ul class="uk-nav-sub">
                            <li><a href="base.html">基础</a></li>
                            <li><a href="print.html">打印</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-th-large"></i> 布局类组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="grid.html">网格</a></li>
                            <li><a href="panel.html">面板</a></li>
                            <li><a href="block.html">块</a></li>
                            <li><a href="article.html">文章</a></li>
                            <li><a href="comment.html">评论</a></li>
                            <li><a href="utility.html">效果</a></li>
                            <li><a href="flex.html">Flex</a></li>
                            <li><a href="cover.html">覆盖</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-bars"></i> 导航类组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="nav.html">导航菜单</a></li>
                            <li><a href="navbar.html">导航栏</a></li>
                            <li><a href="subnav.html">二级导航</a></li>
                            <li><a href="breadcrumb.html">面包屑</a></li>
                            <li><a href="pagination.html">分页</a></li>
                            <li><a href="tab.html">选项卡</a></li>
                            <li><a href="thumbnav.html">缩略图导航</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-check"></i> 页面元素</a>
                        <ul class="uk-nav-sub">
                            <li><a href="list.html">列表</a></li>
                            <li><a href="description-list.html">描述列表</a></li>
                            <li><a href="table.html">表格</a></li>
                            <li><a href="form.html">表单</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-folder-open"></i> 常用组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="button.html">按钮</a></li>
                            <li><a href="icon.html">图标</a></li>
                            <li><a href="close.html">关闭</a></li>
                            <li><a href="badge.html">徽章</a></li>
                            <li><a href="alert.html">提示框</a></li>
                            <li><a href="thumbnail.html">缩略图</a></li>
                            <li><a href="overlay.html">遮罩</a></li>
                            <li><a href="text.html">文本</a></li>
                            <li><a href="column.html">列</a></li>
                            <li><a href="animation.html">动画</a></li>
                            <li><a href="contrast.html">对比度</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-magic"></i> JavaScript组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="dropdown.html">下拉菜单</a></li>
                            <li><a href="modal.html">模态对话框</a></li>
                            <li><a href="offcanvas.html">抽屉</a></li>
                            <li><a href="switcher.html">切换器</a></li>
                            <li><a href="toggle.html">拨动</a></li>
                            <li><a href="scrollspy.html">滚动监听</a></li>
                            <li><a href="smooth-scroll.html">平滑滚动</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-header">附加组件</li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-th-large"></i> 布局类组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="grid-js.html">动态网格</a></li>
                            <li><a href="grid-parallax.html">视差网格</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-bars"></i> 导航类组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="dotnav.html">圆点导航</a></li>
                            <li><a href="slidenav.html">滑动导航</a></li>
                            <li><a href="pagination-js.html">动态分页</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-folder-open"></i> 常用组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="form-advanced.html">高级表单</a></li>
                            <li><a href="form-file.html">文件表单</a></li>
                            <li><a href="form-password.html">密码表单</a></li>
                            <li><a href="form-select.html">选择表单</a></li>
                            <li><a href="placeholder.html">占位符</a></li>
                            <li><a href="progress.html">进度条</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-magic"></i> JavaScript组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="lightbox.html">灯箱</a></li>
                            <li><a href="autocomplete.html">自动完成</a></li>
                            <li><a href="datepicker.html">日期选择器</a></li>
                            <li><a href="htmleditor.html">HTML 编辑器</a></li>
                            <li><a href="slider.html">滚动条</a></li>
                            <li><a href="slideset.html">滑块集</a></li>
                            <li><a href="slideshow.html">幻灯片</a></li>
                            <li><a href="parallax.html">视差</a></li>
                            <li><a href="accordion.html">手风琴</a></li>
                            <li><a href="notify.html">通知</a></li>
                            <li><a href="search.html">搜索</a></li>
                            <li><a href="nestable.html">可嵌套</a></li>
                            <li><a href="sortable.html">可排序</a></li>
                            <li><a href="sticky.html">附着</a></li>
                            <li><a href="timepicker.html">时间选择器</a></li>
                            <li><a href="tooltip.html">工具提示</a></li>
                            <li><a href="upload.html">上传</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-divider"></li>
                    <li><a href="../showcase/index.html">案例展示</a></li>
                    <li><a href="tutorials.html">视频教程</a></li>
                </ul>

            </div>

        </div>

    </body>
</html>
